<template>
	<view class="income-info">
		<view class="c-row-box">
			<view class="c-row-head">
				<view class="c-row-title">合同信息</view>
			</view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">订单备注</view>
						<view class="col-text">
							<textarea v-model="orderParams.remark" :disabled="isPreview" placeholder="注意,备注金额不参与计算!!!"
								placeholder-style="font-size: 24upx" />
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>测试</view>
						<view class="col-file">
							<view class="example-body">
								<uni-file-picker v-model="orderParams.images" @select="select" @success="success"
									limit="12" title="最多选择9张图片">
								</uni-file-picker>
								<!-- 						<uni-file-picker v-model="imageValue" file-mediatype="image" mode="grid"
									file-extname="png,jpg" :limit="1" @progress="progress" @success="success"
									@fail="fail" @select="select" /> -->
							</view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>合同图片</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item,index) in orderParams.image" :key="index">
								<image :src="item" mode="widthFix" @click="preViewImage('image')"></image>
								<uni-icons @click="deleteImageArray(index,'image')" type="minus-filled" size="10"
									color="red" style="position: absolute;right:0;top: -16upx;" v-if="!isPreview">
								</uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage('image')" v-if="!isPreview">
								<image src="@/static/add.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>收据图片</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item,index) in orderParams.receipt_img"
								:key="index">
								<image :src="item" mode="widthFix" @click="preViewImage('receipt_img')"></image>
								<uni-icons @click="deleteImageArray(index,'receipt_img')" type="minus-filled" size="10"
									color="red" style="position: absolute;right:0;top: -16upx;" v-if="!isPreview">
								</uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage('receipt_img')" v-if="!isPreview">
								<image src="@/static/add.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title"><text style="color: red;">*</text>小票图片</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item,index) in orderParams.note_img" :key="index">
								<image :src="item" mode="widthFix" @click="preViewImage('note_img')"></image>
								<uni-icons @click="deleteImageArray(index,'note_img')" type="minus-filled" size="10"
									color="red" style="position: absolute;right:0;top: -16upx;" v-if="!isPreview">
								</uni-icons>
							</view>
							<view class="addPic image-item" @click="chooseImage('note_img')" v-if="!isPreview">
								<image src="@/static/add.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'

	export default {
		props: {
			isPreview: {
				type: Boolean,
				default () {
					return false
				}
			},
			orderParams: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			// 上传成功
			success(e) {
				console.log(e)
				console.log(this.orderParams.images)
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				const tempFilePaths = e.tempFilePaths;
				console.log(this.orderParams.images)
				uni.uploadFile({
					url: request.http + "/h5/order.upload/doupload",
					files: tempFilePaths,
					header: {},
					formData: {
						token: uni.getStorageSync("token") ? uni.getStorageSync("token") : ''
					},
					success: (res) => {
						uni.hideLoading()
						console.log(res)
					},
					fail: () => {},
					complete: () => {}
				})
			},
			//选择图片
			chooseImage(type) {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有				     
					success: function(res) {
						that.upImg(res.tempFiles, type)
					}
				});
			},

			//上传图片
			upImg(data, type) {
				let that = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				console.log(data.i)
				var i = data.i ? data.i : 0; //当前上传的哪张图片
				console.log(i)
				var success = data.success ? data.success : 0; //上传成功的个数
				var fail = data.fail ? data.fail : 0; //上传失败的个数
				console.log(data[i].path)
				uni.uploadFile({
					url: request.http + "/h5/order.upload/doupload",
					filePath: data[i].path,
					header: {},
					name: 'file',
					formData: {
						token: uni.getStorageSync("token") ? uni.getStorageSync("token") : ''
					},
					success: (res) => {
						uni.hideLoading()
						if (JSON.parse(res.data).msg == "上传成功") {
							success++; //图片上传成功，图片上传成功的变量+1
						}
						if (type == 'image') {
							that.orderParams.image.push(JSON.parse(res.data).data.url)
						}
						if (type == 'receipt_img') {
							that.orderParams.receipt_img.push(JSON.parse(res.data).data.url)
						}
						if (type == 'note_img') {
							that.orderParams.note_img.push(JSON.parse(res.data).data.url)
						}
					},
					fail: () => {
						fail++; //图片上传失败，图片上传失败的变量+1
					},
					complete: () => {
						i++; //这个图片执行完上传后，开始上传下一张
						if (i == data.length) { //当图片传完时，停止调用          
							uni.showToast({
								icon: 'none',
								title: '成功：' + success + " 失败：" + fail,
							})
						} else { //若图片还没有传完，则继续调用函数
							data.i = i;
							data.success = success;
							data.fail = fail;
							that.upImg(data);
						}
					}
				})
			},

			//删除图片
			deleteImageArray(index, type) {
				console.log(type);
				if (type == 'image') {
					this.orderParams.image.splice(index, 1)
					console.log(123);
				}
				if (type == 'receipt_img') {
					this.orderParams.receipt_img.splice(index, 1)
				}
				if (type == 'note_img') {
					this.orderParams.note_img.splice(index, 1)
				}
			},

			// 预览图片
			preViewImage(type) {
				if (type == 'image') {
					uni.previewImage({
						current: 0,
						urls: this.orderParams.image
					})
				}
				if (type == 'receipt_img') {
					uni.previewImage({
						current: 0,
						urls: this.orderParams.receipt_img
					})
				}
				if (type == 'note_img') {
					uni.previewImage({
						urls: this.orderParams.note_img
					})
				}
			}

		}
	}
</script>

<style lang="less">
	@import url('../../components/common.less');
	@import url('./common.less');

	.addPic {
		position: relative;
		overflow: hidden;
		width: 68upx;
		height: 68upx;
		border: 1px solid #CCCCCC;
		margin-left: 20upx;

		image {
			width: 68upx;
			height: 68upx;
			margin-right: 37upx;
		}
	}

	/deep/.uni-file-picker {
		margin-left: 10px;
		width: 95%;
	}

	/deep/.file-picker__box {
		width: 25%;
	}

	/deep/.uni-file-picker__header {

		padding-top: 0;
		padding-bottom: 0;

	}
</style>
